<template>
  <div class="home">
    <van-swipe class="swipe" vertical :loop="false" :show-indicators="false" :autoplay="'false'" ref="swiper"
      @change="swipeChange">
      <van-swipe-item :default="1">
        <homeList />
      </van-swipe-item>
      <van-swipe-item :default="2">
        <blurb :pageIndex="pageIndex" />
      </van-swipe-item>
      <van-swipe-item :default="3">
        <join />
      </van-swipe-item>
      <van-swipe-item :default="4">
        <login />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import blurb from "@/views/indexViews/blurb.vue";
import join from "@/views/indexViews/join.vue";
import login from "@/views/indexViews/login.vue";
import market from "@/views/indexViews/market.vue";
import homeList from "@/views/indexViews/homeList.vue";
import { Swipe, SwipeItem } from "vant";
import Vue from "vue";

import "vant/lib/index.css"; // 引入样式

// 注册全局组件
Vue.use(Swipe);
export default {
  components: {
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
    blurb,
    join,
    login,
    market,
    homeList,
  },
  data() {
    return {
      pageIndex: 0
    }
  },
  methods: {
    indexFun(index) {
      this.$refs.swiper.swipeTo(index);
    },
    swipeChange(index) {
      this.pageIndex = index
      this.$emit("swipeIndex", index);
    },
  },
};
</script>
<style lang="scss" scoped>
.swipe {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .van-swipe-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .footer {
    height: 100px;
  }
}

.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>